<template>
  <div id="footer">
    <div class="bgbox">
      <div>
        <a href="##">
          <i>
            <img src="@/assets/two/footer_03.png" class="a1" />
          </i>
          <span class="one">首页</span>
        </a>
      </div>
      <div>
        <a href="##" class="act">
          <i>
            <img src="@/assets/two/foot_05.jpg" class="a2" />
          </i>
          <span class="two">达人</span>
        </a>
      </div>
      <div>
        <a href="##">
          <i>
            <img src="@/assets/two/footer_12.png" class="a3" />
          </i>
          <span class="three">直播</span>
        </a>
      </div>
      <div>
        <a href="##">
          <i>
            <img src="@/assets/two/footer_07.png" class="a4" />
          </i>
          <span class="fire">商品</span>
        </a>
      </div>
      <div>
        <a href="##">
          <i>
            <img src="@/assets/two/footer_09.jpg" class="a5" />
          </i>
          <span class="five">我的</span>
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery';
export default {
  data() {
    return {
      active: 0
    };
  },
  mounted: function () {
    $('.bgbox>div').click(function () {
      //点击
      $(this).children().css('color', '#1779ff'); //点击的变色
      $(this).siblings().children().css('color', '#888'); //同胞显示其他颜色
      var n = $(this).index(); //点击的index值F
      //分别是改变图片的地方，跟颜色一样，同胞变其他灰色图片，自个变
      if (n == '0') {
        //require解析图片路径
        $('.a1').attr('src', require('@/assets/two/a-foot_03.png'));
        $('.a2').attr('src', require('@/assets/two/foot_05.jpg'));
        $('.a3').attr('src', require('@/assets/two/footer_12.png'));
        $('.a4').attr('src', require('@/assets/two/footer_07.png'));
        $('.a5').attr('src', require('@/assets/two/footer_09.jpg'));
      }
      if (n == '1') {
        $('.a1').attr('src', require('@/assets/two/footer_03.png'));
        $('.a2').attr('src', require('@/assets/two/a-footer_05.png'));
        $('.a3').attr('src', require('@/assets/two/footer_12.png'));
        $('.a4').attr('src', require('@/assets/two/footer_07.png'));
        $('.a5').attr('src', require('@/assets/two/footer_09.jpg'));
      }
      if (n == '2') {
        $('.a1').attr('src', require('@/assets/two/footer_03.png'));
        $('.a2').attr('src', require('@/assets/two/foot_05.jpg'));
        $('.a3').attr('src', require('@/assets/two/footer_12.png'));
        $('.a4').attr('src', require('@/assets/two/footer_07.png'));
        $('.a5').attr('src', require('@/assets/two/footer_09.jpg'));
      }
      if (n == '3') {
        $('.a1').attr('src', require('@/assets/two/footer_03.png'));
        $('.a2').attr('src', require('@/assets/two/foot_05.jpg'));
        $('.a3').attr('src', require('@/assets/two/footer_12.png'));
        $('.a4').attr('src', require('@/assets/two/a-goods_03.jpg'));
        $('.a5').attr('src', require('@/assets/two/footer_09.jpg'));
      }

      if (n == '4') {
        $('.a1').attr('src', require('@/assets/two/footer_03.png'));
        $('.a2').attr('src', require('@/assets/two/foot_05.jpg'));
        $('.a3').attr('src', require('@/assets/two/footer_12.png'));
        $('.a4').attr('src', require('@/assets/two/footer_07.png'));
        $('.a5').attr('src', require('@/assets/two/a-main_03.jpg'));
      }
    });
  }
};
</script>
<style scoped lang='less'>
#footer {
  width: 100%;
  background: #fff;
  position: fixed;
  bottom: 0;
  z-index: 120;
  .bgbox {
    max-width: 690px;
    width: 92%;
    margin: 0 auto;
    display: flex;
    div {
      width: 13.04%;
      margin-left: 8.6%;
      a,
      i,
      span {
        display: block;
        text-decoration: none;
      }
      i {
        width: 0.56rem;
        height: 0.533333rem;
        margin-top: 0.2rem;
        margin-left: 0.32rem;
        img {
          display: block;
          width: 100%;
        }
      }
      span {
        font-size: 0.266667rem;
        text-align: center;
        line-height: 0.533rem;
        padding-bottom: 0.026rem;
      }
    }
    div:nth-of-type(1) {
      margin-left: 0;
    }
  }
}
</style>